import { Form, Input, Modal, Upload, Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import React, { memo, useState } from "react";
import axios from "axios";

const validateMessages = {
  required: "${label} 是必传的!",
};
const layout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 21,
  },
};
const AddModal = memo(({ visible, handleCancel, getList }) => {
  const [loadingModal, setLoadingModal] = useState(false);
  const onFinish = (values) => {
    setLoadingModal(true);
    console.log("values", values);
    console.log(
      "values.file.map((item) => item.originFileObj)",
      values.file.map((item) => item.originFileObj)
    );
    const data = {
      ...values,
      file: values.file.map((item) => item.originFileObj),
    };
    console.log(data, "data");
    axios({
      method: "POST",
      url: `http://192.168.200.129:8081/wordTemplate/resolveAdd`,
      headers: {
        "Content-Type": "multipart/form-data",
      },
      timeout: 30000,
      data: data,
    })
      .then((res) => {
        if (res.data.code === 200) {
          getList && getList();
          handleCancel && handleCancel();
          setLoadingModal(false);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const normFile = (e) => {
    const formData = new FormData();
    formData.append("file", e);
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };
  const props = {
    name: "file",
    multiple: true,
    listType: "picture",
    // showUploadList: false, //不展示列表
    // beforeUpload: () => false,
    // beforeUpload: (file) => {
    //   console.log(file);
    //   const isPNG = file.type === "image/png";
    //   if (!isPNG) {
    //     message.error(`${file.name} is not a png file`);
    //   }
    //   return isPNG || Upload.LIST_IGNORE;
    // },
  };
  return (
    <div>
      <Modal
        title="新增"
        open={visible}
        onCancel={handleCancel}
        destroyOnClose
        okButtonProps={{
          htmlType: "submit",
          form: "form",
        }}
        confirmLoading={loadingModal}
        width="760px"
      >
        <Form
          {...layout}
          name="form"
          onFinish={onFinish}
          preserve={false}
          style={{
            maxWidth: 600,
          }}
          validateMessages={validateMessages}
        >
          <Form.Item
            name="name"
            label="名称"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="cate"
            label="类别"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="no"
            label="编号"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="file"
            label="Upload"
            valuePropName="fileList"
            getValueFromEvent={normFile}
          >
            <Upload {...props}>
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              ...layout.wrapperCol,
              offset: 8,
            }}
          >
            {/* <Button type="primary" htmlType="submit">
              提交
            </Button> */}
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
});

export default AddModal;
